<template>
  <template v-if="showDbInput">
    <el-input
      v-model="dbClick.label"
      clearable
      :maxlength="maxLength"
      @blur="handleDbBlur"
      @keyup.enter="handleEnter"
      class="dbEdit"
      ref="dbClickInput"
      :type="belongModel === 'form' && name === 'description' ? 'textarea' : ''"
      :class="
        belongModel === 'form' && name === 'description'
          ? 'dbEdit__textarea'
          : ''
      "
    />
  </template>
  <template v-else>
    <slot />
  </template>
</template>

<script lang="ts" setup>
import { reactive, ref, defineProps, nextTick } from "vue";
import { useFormStore } from "@bis/stores/form";

const formStore = useFormStore();

const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  maxLength: {
    type: Number,
    default: 50,
  },
  belongModel: {
    type: String,
    default: "question",
  },
});

const showDbInput = ref(false);
const dbClickInput = ref(null);
const dbClick = reactive({
  name: "",
  value: "",
  label: "",
  status: false,
});

const handleDbClick = (field = null) => {
  if (!formStore.isDesigner) return;
  dbClick.name = props.name;
  dbClick.status = true;
  showDbInput.value = true;
  nextTick(() => {
    dbClickInput.value.focus();
  });
};

const handleDbBlur = () => {
  if (!formStore.isDesigner) return;
  showDbInput.value = false;
};

const handleEnter = () => {};

defineExpose({
  handleDbClick,
});
</script>
